---
import Layout from '~layouts/VanillaDemo.astro';
import {title} from './_crosses.json';
---

<Layout title={title}>
  <canvas id="canvas-container" resize-to="window"></canvas>
</Layout>

<style>
  body {
    height: 100vh;
    overflow-y: hidden;
  }
  body {
    background: radial-gradient(circle, rgb(44 45 46) 0%, rgb(52 105 137) 100%);
  }
</style>

<script>
  import {VertexObjectGeometry, VertexObjects} from '@spearwolf/twopoint5d';
  import {DoubleSide, MeshBasicMaterial} from 'three';
  import {PerspectiveOrbitDemo} from '~demos/utils/PerspectiveOrbitDemo';
  import {CrossDescriptor, Cross} from '~demos/crosses/Crosses';

  function makeCrossMesh(capacity: number, size: number, offset = 1.2) {
    const geometry = new VertexObjectGeometry(CrossDescriptor, capacity);

    for (let i = 0; i < capacity; i++) {
      const cross = geometry.pool.createVO() as Cross;
      cross.make(size, size);
      cross.rotate(i * 45);
      cross.translate(i * size * offset - ((capacity - 1) * size * offset) / 2, 0);
    }

    const material = new MeshBasicMaterial({
      color: 0xf01065,
      side: DoubleSide,
    });

    const mesh = new VertexObjects(geometry, material);
    mesh.name = 'CrossMesh';

    return mesh;
  }

  const demo = new PerspectiveOrbitDemo(document.getElementById('canvas-container'));

  demo.on('init', ({scene}) => {
    scene.add(makeCrossMesh(10, 10));
  });

  demo.start();

  console.dir(demo);
</script>
